<template>
  <view>
    <l-background />
    <view class="flex-row align-center top">
      <text class="text-26 color-secondary">可收款：{{ options.amountRepaid }}</text>
      <text class="text-26 color-secondary margin-left-30">待入账：{{ options.noRecorded }}</text>
    </view>

    <view class="padding-30">
      <view class="card">
        <l-form-cell label="收款金额" has-slot must>
          <view class="flex-row flex-item align-center justify-end">
            <input v-model="form.amountCollected" class="form-item flex-item text-right text-30" type="digit" placeholder="请输入收款金额">
            <view class="form-item padding-left-10 flex-row flex-center" @click="setAll">
              <text class="text-30 color-primary">全部</text>
            </view>
          </view>
        </l-form-cell>

        <l-form-cell label="支付日期" :value="form.paymentDate" placeholder="请选择日期" must disabled arrow @click="showDate" />

        <l-form-cell label="支付方式" has-slot arrow>
          <picker mode="selector" class="flex-item" :value="paymentMethodIndex" :range="paymentMethods" range-key="label" @change="changeData($event,'paymentMethod','paymentMethods')">
            <view class="form-item flex-row flex-item align-center justify-end">
              <text class="text-30" :class="['color-t' + (paymentMethod ? 1 : 3)]">{{ paymentMethod || '请选择支付方式' }}</text>
            </view>
          </picker>
        </l-form-cell>

        <l-form-cell label="发票" has-slot arrow unlined>
          <picker mode="selector" class="flex-item" :value="invoiceIndex" :range="invoiceList" range-key="label" @change="changeData($event,'invoice','invoiceList')">
            <view class="form-item flex-row flex-item align-center justify-end">
              <text class="text-30" :class="['color-t' + (invoice ? 1 : 3)]">{{ invoice || '请选择发票' }}</text>
            </view>
          </picker>
        </l-form-cell>
      </view>

      <view class="card margin-top-20 bill-box">
        <text class="text-30 color-t1">票据/截图</text>
        <tui-upload
          :value="photos"
          :icon-size="60"
          :limit="1"
          width="146"
          height="146"
          dir="bill"
          margin="20rpx 0 0 0"
          @chooseImage="chooseImage"
          @remove="removeImage"
        />
      </view>

      <view class="card margin-top-20">
        <l-form-cell v-model="form.handler" label="经办人" placeholder="请输入经办人" />
        <l-form-cell v-model="form.remarks" label="备注" placeholder="请输入备注" unlined />
      </view>
    </view>

    <tui-datetime ref="dateTime" :type="2" :end-year="2100" @confirm="form.paymentDate = $event.result" />

    <l-bottom-button :show-button="false">
      <view class="flex-row">
        <view v-if="form.id" class="flex-item margin-right-20">
          <tui-button plain text="删除" @click="showModal = true" />
        </view>
        <view class="flex-item">
          <tui-button text="确定" @click="save" />
        </view>
      </view>
    </l-bottom-button>

    <tui-modal :show="showModal" title="提示" content="是否删除收款记录？" @click="modalClick" />
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { formVerify } from '@/common/util'
import { paymentMethods, invoiceList } from '../index'
import { addCollectionDetails, updateCollectionDetails, delCollectionDetails } from '../api'
export default {
  name: 'PaymentDetails',
  data() {
    return {
      showModal: false,
      form: {
        id: '',
        affiliatedBill: '',
        amountCollected: '',
        payingCustomer: '',
        paymentDate: '',
        paymentMethod: '',
        handler: '',
        invoice: '',
        remarks: '',
        screenshotUrl: '',
        amountRepaid: ''
      },
      options: {
        amountRepaid: 0,
        noRecorded: 0
      },
      paymentMethods,
      paymentMethodIndex: '',
      paymentMethod: '',
      invoiceList,
      invoiceIndex: '',
      invoice: '',
      photos: [],
      formatList: [
        { attr: 'amountCollected', toast: '请输入收款金额' }
      ]
    }
  },
  computed: {
    ...mapGetters({
      paymentDetail: 'paymentDetail'
    })
  },
  onLoad(e) {
    this.options = e
    Object.assign(this.form, this.paymentDetail)
    if (this.form.paymentMethod || this.form.paymentMethod === 0) this.changeData({ detail: { value: this.form.paymentMethod }}, 'paymentMethod', 'paymentMethods')
    if (this.form.invoice || this.form.invoice === 0) this.changeData({ detail: { value: this.form.invoice }}, 'invoice', 'invoiceList')
    if (this.form.screenshotUrl) this.photos.push(this.form.screenshotUrl)
  },
  methods: {
    setAll() {
      this.form.amountCollected = this.options.amountRepaid
    },
    showDate() {
      this.$refs.dateTime.show()
    },
    changeData(e, attr, list) {
      const inx = e.detail.value
      this[attr + 'Index'] = inx
      this[attr] = this[list][inx].label
      this.form[attr] = this[list][inx].value
    },
    chooseImage(e) {
      this.photos.push(...e)
      this.form.screenshotUrl = this.photos.join(',')
    },
    removeImage(e) {
      this.photos.splice(e.index, 1)
      this.form.screenshotUrl = this.photos.join(',')
    },
    async save() {
		if(this.form.amountCollected && !this.$verify.isNumber(this.form.amountCollected,'收款金额只能为数据类型')){
			return false
		}
		if(this.form.amountCollected <= 0){
			this.toast('收款金额不能小于或等于0！')
			return false
		}
      if (this.formVerify()) {
        const type = this.options.type
        let api = addCollectionDetails
        let toast = '添加成功'

        if (type === 'edit') {
          api = updateCollectionDetails
          toast = '编辑成功'
        }

        const [err, res] = await api(this.form)
        if (!this.$http.errorCheck(err, res)) return false

        this.toast(toast, () => {
          this.jump()
        })
      }
    },
    formVerify() {
      return formVerify(this.form, this.formatList, () => {
        if (this.form.amountCollected > this.options.amountRepaid) {
          this.toast('收款金额不能大于可收款金额')
          return false
        }
        return true
      })
    },
    async modalClick(e) {
      this.showModal = false
      if (e.index) {
        const [err, res] = await delCollectionDetails(this.form.id)
        if (!this.$http.errorCheck(err, res)) return false
        this.jump()
        this.toast('操作成功')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.top{
  padding:28rpx;
  background:$color-primary;
}
.bill-box{
  padding:28rpx;
}
</style>
